<template>
    <div class="login-container">
        <el-card class="login-card">
            <template #header>
                <div class="card-header">
                    <span>xsap在线约课系统欢迎登录</span>
                </div>
            </template>
            <!-- 表单内容 -->
            <el-form :model="form" 
            label-position="left" 
            ref="ruleFormRef" 
            :rules="rules" 
            hide-required-asterisk>
                <el-form-item label="用户名" label-width="60px" prop="name">
                    <el-input v-model="form.name" placeholder="请输入用户名" :prefix-icon="User" />
                </el-form-item>
                <el-form-item label="密码" label-width="60px" prop="password">
                    <el-input v-model="form.password" placeholder="请输入密码" type="password" :prefix-icon="Lock" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleLogin(ruleFormRef)" style="width: 100%;">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref,reactive} from 'vue'
import { User,Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
//表单绑定的对象
const form  =reactive({
    name:'',
    password:'',
    code:''
})
//表单对象
const ruleFormRef = ref()
//表单验证
const rules = reactive({
    name: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],   
})
//登录的方法
const handleLogin = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {//基础验证通过
            console.log('submit!')
            console.log("登录的信息：", form)
            //todo调用后端登录的接口
            router.push('/home')
        } else {//基础验证不通过
            console.log('error submit!', fields)
        }
    })
}

</script >
<style  scoped>
.login-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url("@/assets/img/loginbg-1.png");
    background-size: cover;
    background-position: center;
   
}
.login-card{
    width: 400px;
    padding:10px
}
.card-header{
    text-align: center;
    font-size: 24px;
}
</style>